<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="add">
    <ul>
        <li v-for="user in users" v-if="user.age>20 && user.age<24">
            {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
        <hr>
        <li v-for="(user,index) in users">
            {{index}}----{{user.name}} - {{user.gender}} - {{user.age}}
        </li>
        <hr>
        <li v-for="(value,key) in student">
            {{value}}--{{key}}
        </li>
    </ul>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var add = new Vue({
        el: "#add",
        data:{
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ],
            student:{username:'com.zls',password:'123123'}
        }
    })
</script>
</html>